<template>
  <basic-dialog v-model="dialogVisible" :submitBtnLoading="submitLoading" title="'生产计划信息'" width="1000"
                @cancel="handlerCancel" @close="handlerCancel" @submit="handleSubmit">
    <basic-crud ref="crudRef" :apiListParams="getParams"
                :fastSearch="{name:'计划编号、规程编号、项目号',fastColumn:'sourceCode,primaryTargetCode,code'}" :option="option"
                apiGetListUrl="/mes/mesWorkOrderController/listForProgress">
      <template #showLevel="{row}">
        <el-tooltip v-if="row.showLevel == 1" class="item" content="已经超期了" effect="dark" placement="top-start">
          <el-icon :size="20" color="red">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
        <el-tooltip v-else-if="row.showLevel == 2" class="item" content="剩余交付时间5天内" effect="dark"
                    placement="top-start">
          <el-icon :size="20" color="orange">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
        <el-tooltip v-else-if="row.showLevel == 3" class="item" content="剩余交付时间5到10天内" effect="dark"
                    placement="top-start">
          <el-icon :size="20" color="yellow">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
        <el-tooltip v-else-if="row.showLevel == 4" class="item" content="交付日期可控" effect="dark" placement="top-start">
          <el-icon :size="20" color="green">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
        <el-tooltip v-else-if="row.showLevel == 5" class="item" content="还未派工" effect="dark" placement="top-start">
          <el-icon :size="20" color="gray">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
        <el-tooltip v-else-if="row.showLevel == 6" class="item" content="已经入库" effect="dark" placement="top-start">
          <el-icon :size="20" color="lightgreen">
            <BellFilled/>
          </el-icon>
        </el-tooltip>
      </template>
      <template #primaryTargetCode="{ row }">
        <el-button
            type="text"
            @click="openProcessesDetails(row, 'primaryTargetId')"
        >{{ row.primaryTargetCode }}
        </el-button
        >
      </template>
    </basic-crud>
  </basic-dialog>
</template>

<script setup>
import {computed} from 'vue';
import {formatDate} from "../../../utils/formatTime";

const dialogVisible = ref(false);
const submitLoading = ref(false);
const crudRef = ref(null);
const getParams = computed(() => {
  return {
    modelName: parentRow.value.modelName,
    code: parentRow.value.code,
    stage: parentRow.value.stage,
  }
});
const option = ref({
  addBtn: false,
  cellBtn: true,
  editBtn: false,
  align: "center",
  menu: false,
  highlightCurrentRow: true,
  searchShowBtn: true,
  height: "500px",
  searchMenuPosition: "right",
  searchMenuSpan: 6,
  searchShow: false,
  column: [
    {
      label: '预警',
      prop: 'showLevel',
      fixed: true,
      width: 55
    },
    {
      label: "状态",
      prop: "status",
      width: 90,
      align: 'center',
      slot: true,
      search: true,
      searchType: "select",
      fixed: true,
      display: false,
      multiple: true,
      searchSpan: 4,
      overHidden: false,
      statusShow: true,
      statusTag: true,
      statusTypeMap: {
        Suspended: 'danger',
        Obsoleted: 'info',
        ExecuteFinish: 'success',
        Finish: 'success'
      },
    },
    {
      label: "完工率",
      prop: 'percent',
      width: 70
    }, {
      label: '计划编号',
      prop: 'sourceCode',
      width: 220,
      fixed: true,
      search: true,
      searchSpan: 4,
      //searchLabelWidth:'100px',
      overHidden: true,
    },
    {
      label: "erp计划名称",
      prop: "planAuditOrderName",
      display: false,
      overHidden: true,
      fixed: true,
      width: 120,
    },
    {
      label: "项目号",
      prop: "code",
      fixed: true,
      sortable: true,
      display: false,
      width: 130,
      overHidden: true,
      searchSpan: 4,
      search: true,
    }, {
      label: '数量',
      prop: 'quantity',
      width: 60,
      display: false
    },
    {
      label: "产品名称",
      prop: "pdmProductName",
      sortable: true,
      searchSpan: 4,
      display: false,
      overHidden: true,
      width: 100,
    },
    {
      label: "产品型号",
      prop: "modelName",
      sortable: true,
      overHidden: true,
      width: 120,
      searchSpan: 4,
      display: false,
      search: true,
      formatter: (val) => {
        return val.modelName;
      }
    },
    {
      label: "产品编号",
      prop: "pdmProductCode",
      sortable: true,
      overHidden: true,
      cell: true,
      display: false,
      width: 120,
      searchSpan: 4,
      search: true,
    }, {
      label: '产品主管',
      prop: 'assignerName',
      width: 100,
      search: true,
      searchSpan: 4,
      display: false
    },
    {
      label: "规程编号",
      prop: "primaryTargetCode",
      width: 120,
      overHidden: true,
      search: true,
      sortable: true,
      searchSpan: 4,
      display: false,
      slot: true,
      formatter: (val) => {
        if (val.targets && val.targets.length > 0) {
          var s = "";
          for (var i = 0; i < val.targets; i++) {
            var record = val.targets[i];
            s += record.targetCode + " " + record.targetName;
            if (i != val.targets.length - 1) {
              s += "<br/>";
            }
          }
          return s;
        } else {
          return val.primaryTargetCode;
        }
      },
    },
    {
      label: "计划开始日期",
      prop: "needStartDate",
      sortable: true,
      width: 120,
      display: false,
      formatter: (row) => {
        return formatDate(row.needStartDate, "yyyy-MM-dd");
      },
    },
    {
      label: "计划结束日期",
      prop: "needEndDate",
      sortable: true,
      width: 120,
      display: false,
      search: true,
      searchSpan: 8,
      //searchLabelWidth:'100px',
      searchType: 'daterange',
      formatter: (row) => {
        return formatDate(row.needEndDate, "yyyy-MM-dd");
      },
    },
    {
      label: "计划交付日期",
      prop: "deliveryDate",
      sortable: true,
      display: false,
      width: 120,
      formatter: (row) => {
        return formatDate(row.deliveryDate, "yyyy-MM-dd");
      },
    },
    {
      label: "开工日期",
      prop: "beginDate",
      sortable: true,
      display: false,
      width: 120,
      formatter: (row) => {
        return formatDate(row.beginDate, "yyyy-MM-dd");
      },
    },
    {
      label: "完工日期",
      prop: "finishDate",
      sortable: true,
      display: false,
      width: 120,
      formatter: (row) => {
        return formatDate(row.finishDate, "yyyy-MM-dd");
      },
    },

    {
      label: "入库日期",
      prop: "realDeliveryDate",
      sortable: true,
      display: false,
      width: 120,
      formatter: (row) => {
        return formatDate(row.realDeliveryDate, "yyyy-MM-dd");
      },
    },
    {
      label: "紧急程度",
      prop: "exigencyLevel",
      display: false,
      width: 100,
      type: "select",
      dicData: [
        {
          label: "不紧急",
          value: "none",
        },
        {
          label: "一般",
          value: "normal",
        },
        {
          label: "紧急",
          value: "exigency",
        },
        {
          label: "非常紧急",
          value: "veryExigency",
        },
      ],
      formatter: (val) => {
        return val.exigencyLevelText;
      },
    },
    {
      label: "军检",
      prop: "armyCheck",
      display: false,
      width: 60,
      type: "switch",
      dicData: [{
        label: '否',
        value: 'false'
      }, {
        label: '是',
        value: 'true'
      }],
    }, {
      label: "批次号",
      prop: "batchNum",
      display: false,
      overHidden: true,
      width: 120,
    }, {
      label: '配套机型',
      prop: 'targetModel',
      display: false,
      overHidden: true,
      width: 120
    },
    {
      label: "手动计划依据",
      prop: "sourceBasis",
      display: false,
      slot: true,
      width: 120,
    },
  ]
});
const parentRow = ref({});
const openDialog = (type, row) => {
  console.log(type);
  dialogVisible.value = true;
  parentRow.value = row;
};
// 打开规程弹窗
const openProcessesDetails = () => {

};
const handlerCancel = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>

</style>
